<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="admin/shared/meta :: copymeta"></head>
<body>
<!--内容-->
<article class="page-container">
    <form class="form form-horizontal" id="ajaxForm" method="post" action="/menu/additem" enctype="multipart/form-data">
     <div class="row cl">
        <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>菜单名称：</label>
        <div class="formControls col-xs-8 col-sm-9">
            <input type="text" class="input-text" value="" placeholder="" id="name" name="name">
        </div>
    </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>访问地址：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" value="" placeholder="" id="url" name="url">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>图标：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" value="" placeholder="" id="icon" name="icon">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>备注：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" value="" placeholder="" id="remarks" name="remarks">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2">测试文件：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <div class="uploader-thum-container">
                    <div id="fileList" class="uploader-list"></div>
                    <div id="filePicker">选择图片</div>
                    <input type="file" class="input-text" value="" placeholder="" id="file" name="file">
                </div>
            </div>
        </div>
        <div class="row cl">
            <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-2">
                <button onClick="article_save_submit();" class="btn btn-primary radius" type="button">
                    <i class="Hui-iconfont">&#xe632;</i> 保存并提交</button>
            </div>
        </div>
    </form>
</article>
<div id="output1"
     style="width:1000px;height:200px;">
</div>
<!--内容-->
<!--_footer 作为公共模版分离出去-->
<footer th:include="admin/shared/footer :: copyfooter"></footer>
<!--请在下方写此页面业务相关的脚本-->
<!--当前页独立js-->
<script type="text/javascript" src="" th:src="@{/js/jquery.form.js}"></script>
<script type="text/javascript" src="" th:src="@{/js/is.js}"></script>
<script>

        //配置
        var options = {
            target: '#output1', // 从服务传过来的数据显示在这个div内部 也就是ajax局部刷新
            beforeSubmit: showRequest, //提交前的处理
            success:  showResponse    // 提交成功的处理
        };
        //开始提交
        function article_save_submit() {
            $("#ajaxForm").ajaxSubmit(options);
            return false;
        }
    //成功的处理
    function showResponse(responseText, statusText, xhr, $form) {
        alert(xhr.responseText+"=="+$form.attr("method")+'status: ' +
            statusText + '\n\nresponseText: \n' + responseText);
        if(statusText=="success"){
            if(JSON.parse(responseText).message=="ok"){
                alert("提交成功");
            }
        }
    }
    //提交前的处理
    function showRequest(formData, jqForm, options) {
        var queryString = $.param(formData); //获取所有参数 数组类型
        alert(queryString+"======"+formData.length);
    }

</script>
</body>
</html>